<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="title">确认订单</text>
    </view>

    <!-- 收货地址 -->
    <view class="address-section" @click="selectAddress">
      <view v-if="address" class="address-info">
        <view class="user-info">
          <text class="name">{{address.name}}</text>
          <text class="phone">{{address.phone}}</text>
        </view>
        <view class="address-detail">
          {{address.province}}{{address.city}}{{address.district}}{{address.detail}}
        </view>
      </view>
      <view v-else class="no-address">
        <text>请选择收货地址</text>
      </view>
      <image src="/static/右箭头.png" class="arrow-right"></image>
    </view>

    <!-- 商品列表 -->
    <view class="order-items">
      <view class="store-name">{{storeName}}</view>
      <view v-for="(item, id) in orderItems" :key="id" class="order-item">
        <image :src="`/static/${item.product.imgUrl}`" class="product-img"></image>
        <view class="item-info">
          <text class="item-name">{{item.product.name}}</text>
          <view class="item-price-count">
            <text class="item-price">¥{{item.product.price}}</text>
            <text class="item-count">x{{item.count}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="bottom-bar">
      <view class="total">
        <text>合计:</text>
        <text class="total-price">¥{{totalPrice}}</text>
      </view>
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: null,
      orderItems: {},
      storeName: '',
      store: null,
      totalPrice: 0
    }
  },
  onLoad() {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('checkoutData', (data) => {
      this.orderItems = data.items;
      this.store = data.store;
      this.storeName = data.store.name;
      this.calculateTotal();
    });
  },
  methods: {
    calculateTotal() {
      let total = 0;
      for (const id in this.orderItems) {
        const item = this.orderItems[id];
        total += item.product.price * item.count;
      }
      this.totalPrice = total.toFixed(2);
    },
    selectAddress() {
      // 这里可以跳转到选择地址页面
      uni.showToast({
        title: '选择地址功能待实现',
        icon: 'none'
      });
    },
    submitOrder() {
      if (!this.address) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'none'
        });
        return;
      }
      
      // 这里可以实现提交订单的逻辑
      uni.showToast({
        title: '订单提交成功',
        icon: 'success',
        duration: 2000,
        success: () => {
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 2000);
        }
      });
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.address-section {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.address-info {
  flex: 1;
}

.user-info {
  margin-bottom: 10rpx;
}

.name {
  font-size: 30rpx;
  margin-right: 20rpx;
}

.phone {
  font-size: 28rpx;
  color: #666;
}

.address-detail {
  font-size: 28rpx;
  color: #333;
}

.no-address {
  color: #666;
  font-size: 28rpx;
}

.arrow-right {
  width: 40rpx;
  height: 40rpx;
}

.order-items {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx;
}

.store-name {
  font-size: 30rpx;
  font-weight: bold;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.order-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.product-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 28rpx;
  color: #333;
}

.item-price-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-price {
  color: #ff5722;
  font-size: 30rpx;
}

.item-count {
  color: #666;
  font-size: 28rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.total {
  font-size: 28rpx;
}

.total-price {
  color: #ff5722;
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 10rpx;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  font-size: 30rpx;
}
</style>    